import React, { useState, useEffect, useCallback } from 'react';
import styles from './index.less';
import _ from 'lodash';
import kls from 'classnames';
import EchartsWrap from '@/components/widgets/EchartsWrap';
import 'echarts-liquidfill/src/liquidFill.js';
import { connect, useSelector, useDispatch } from 'umi';

const legend = [
  '市政工程',
  '房屋建筑工程',
  '公路工程',
  '港口与航道工程',
  '机电安装工程',
  '其他工程',
];

const _data = [
  {
    value: 0,
    title: '市政工程',
  },

  {
    value: 0,
    title: '房屋建筑',
  },
  {
    value: 0,
    title: '公路工程',
  },
  {
    value: 0,
    title: '港口航道',
  },
  {
    value: 0,
    title: '机电安装',
  },

  {
    value: 0,
    title: '其他工程',
  },
];

function getAllProjCategoryData(_data) {
  let data = legend.map(() => []);
  _data.forEach(proj => {
    let index = legend.indexOf(proj.projectType);
    index = index === -1 ? legend.length - 1 : index;
    data[index].push(proj);
  });
  return data;
}

const color = ['#2FB0FF', '#394F5D', '#394F5D', '#394F5D', '#394F5D', '#394F5D', '#394F5D'];

const Chart1 = ({ setCurProjList }) => {
  const [data, setData] = useState(_data);
  const projList = useSelector(s => s.kanban.projList);
  // const dispatch = useDispatch();
  const [projNestedArr, setProjNestedArr] = useState([]);
  const [curIndex, setCurIndex] = useState(0);
  const [current, setCurrent] = useState('市政工程');
  const [dataOption, setDataOption] = useState(null);

  useEffect(() => {
    if (!projList) return;
    if (!projList.length) return;
    const nestedList = getAllProjCategoryData(projList);
    setProjNestedArr(nestedList);
    const newData = _data.map(({ value, title }, i) => {
      return {
        title,
        value: nestedList[i].length,
      };
    });
    setData(newData);
  }, [projList]);

  useEffect(() => {
    if (!projList || !projNestedArr) return;
    setCurProjList(projNestedArr[curIndex]);
    setDataOption(getAnalysisChartCfg(_data[curIndex || 0].title));
  }, [curIndex, projNestedArr, projList]);

  const getAnalysisChartCfg = useCallback(
    function _getAnalysisChartCfg(select) {
      if (!projNestedArr.length) {
        return;
      }
      const total = data.reduce((r, { value }) => r + value, 0);
      let options = {
        toolbox: {
          show: false,
        },
        title: [
          {
            text: `{num|${total}} {unit|个}`,
            top: '25%',
            left: '50%',
            subtext: '总计',
            textAlign: 'center',
            textStyle: {
              rich: {
                num: {
                  fontSize: 22,
                  fontFamily: 'AlibabaPuHuiTi-Bold, AlibabaPuHuiTi',
                  fontWeight: 'bold',
                  color: '#FFFFFF',
                  lineHeight: 30,
                  verticalAlign: 'bottom',
                },
                unit: {
                  fontSize: 14,
                  lineHeight: 30,
                  color: '#FFFFFF',
                  verticalAlign: 'bottom',
                },
              },
            },
            subtextStyle: {
              fontSize: 12,
              fontFamily: 'AlibabaPuHuiTi-Bold, AlibabaPuHuiTi',
              color: 'rgba(255,255,255,0.6)',
            },
          },
          // {
          //   text: '总计',
          //   top:'55%',
          //   left: '30%'

          // }
        ],
        series: [
          {
            type: 'pie',
            center: ['50%', '50%'],
            radius: ['83%', '95%'],
            hoverAnimation: false,
            data: data.reduce((arr, item, i) => {
              arr.push(
                {
                  name: item.title,
                  value: item.value,
                  labelLine: {
                    show: false,
                  },
                  itemStyle: {
                    color: select === item.title ? color[0] : color[1],
                  },
                  // selected: select === item.title,
                  emphasis: {
                    labelLine: {
                      show: false,
                    },
                  },
                },
                {
                  value: total * 0.02,
                  itemStyle: {
                    color: 'rgba(0,0,0,0)',
                  },
                },
              );
              return arr;
            }, []),
            selectedMode: 'single',
            // selectedOffset: 2,
            selectedOffset: 0,
            itemStyle: {
              normal: {
                // borderColor: 'RGBA(26, 29, 31, 1)',
                // borderWidth: 4,
                opacity: 0.8,
              },
            },

            select: {
              itemStyle: {
                opacity: 1,
              },
            },
            label: {
              normal: {
                show: false,
              },
            },
          },
          {
            type: 'liquidFill',
            radius: '60%',
            center: ['50%', '50%'],
            data: [0.5], // data个数代表波浪数
            backgroundStyle: {
              borderWidth: 1,
              color: 'rgba(255, 255, 255, 0.0)',
            },
            label: {
              normal: {
                show: false,
              },
            },
            color: ['rgba(255, 255, 255, 0.2)'],
            outline: {
              borderDistance: 0,
              itemStyle: {
                borderWidth: 1,
                borderColor: 'rgba(255, 255, 255, 0.2)',
              },
            },
          },
        ],
      };

      return options;
    },
    [data, current, projNestedArr],
  );

  const renderList = () => {
    return (
      <div className={styles.itemWrap}>
        {_.take(data, 4).map((item, i) => {
          return (
            <div
              className={kls(styles.item, { [styles.selected]: current === item.title })}
              key={item.title}
              onClick={() => {
                setCurIndex(i);
                setCurrent(item.title);
                // setDataOption(getAnalysisChartCfg(item.title));
              }}
            >
              <div className={styles.itemTop}>
                <div className={styles.itemTitle}>
                  <img
                    className={styles.itemTopIcon}
                    src={require('../../../images/数据-边框左.png')}
                    width={4}
                    height={16}
                  />
                  {item.title}
                </div>
                <div className={styles.itemValue}>{item.value}</div>
              </div>

              <div className={styles.itemBottom}>
                <div className={styles.itemBottomL}></div>
                <div className={styles.itemBottomR}></div>
              </div>
            </div>
          );
        })}
      </div>
    );
  };
  return (
    <div className={styles.box}>
      <div className={styles.boxInner}>
        <div style={{ width: 140, height: 140 }}>
          {dataOption && (
            <EchartsWrap option={dataOption} style={{ width: '140px', height: '140px' }} />
          )}
        </div>

        <div className={styles.wrapRight}>{renderList()}</div>
      </div>
    </div>
  );
};
export default Chart1;
